<template>
  <div class="error-analysis">
    <div class="analysis-content">
      <!-- 分析说明面板 -->
      <div class="info-panel">
        <h3 class="panel-title">
          <Icon type="md-analytics" size="20" />
          多模型误差评估系统
        </h3>
        
        <div class="info-content">
          <p class="description">
            基于训练测试集数据进行多模型性能对比分析，
            支持精度指标、效率评估、模型空间对比等全方位评估。
          </p>
          
          <div class="control-row">
            <div class="form-group">
              <label>评估模式:</label>
              <Select v-model="evaluationMode" style="width: 150px;" size="small">
                <Option value="current">当前模型</Option>
                <Option value="all">全部模型</Option>
                <Option value="compare">对比模式</Option>
              </Select>
            </div>
            
            <div class="form-group">
              <label>异常检测阈值:</label>
              <InputNumber 
                v-model="anomalyThreshold" 
                :min="0.80" 
                :max="0.99" 
                :step="0.01"
                style="width: 120px;"
                size="small"
                @on-change="updateAnomalyThreshold"
              />
              <span class="unit-label">精度阈值</span>
            </div>
            
            <div class="form-group">
              <Button 
                type="primary" 
                @click="loadErrorAnalysis"
                icon="md-refresh"
                :loading="loading"
                size="small"
              >
                重新分析
              </Button>
              
              <Button 
                type="success" 
                @click="generateReport"
                icon="md-document"
                :loading="reportLoading"
                size="small"
                style="margin-left: 10px;"
              >
                生成报告
              </Button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 多模型对比面板 -->
      <div class="model-comparison" v-if="hasData && evaluationMode === 'all'">
        <div class="section-header">
          <h4>
            <Icon type="md-stats" size="18" />
            多模型性能对比
          </h4>
          <div class="view-controls">
            <Button 
              :type="chartType === 'radar' ? 'primary' : 'default'"
              size="small"
              @click="chartType = 'radar'"
            >
              雷达图
            </Button>
            <Button 
              :type="chartType === 'bar' ? 'primary' : 'default'"
              size="small"
              @click="chartType = 'bar'"
            >
              柱状图
            </Button>
            <Button 
              :type="chartType === 'heatmap' ? 'primary' : 'default'"
              size="small"
              @click="chartType = 'heatmap'"
            >
              热力图
            </Button>
            <Button 
              :type="chartType === 'table' ? 'primary' : 'default'"
              size="small"
              @click="chartType = 'table'"
            >
              表格
            </Button>
          </div>
        </div>
        
        <div class="comparison-content">
          <div id="comparisonChart" v-show="chartType !== 'table'" style="width: 100%; height: 450px;"></div>
          
          <div class="comparison-table" v-show="chartType === 'table'">
            <div class="table-controls">
              <div class="sort-options">
                <span>排序方式:</span>
                <Select v-model="sortBy" style="width: 120px;" size="small" @on-change="updateTableSort">
                  <Option value="mae">MAE</Option>
                  <Option value="rmse">RMSE</Option>
                  <Option value="r2">R²</Option>
                  <Option value="mape">MAPE</Option>
                  <Option value="training_time">训练时间</Option>
                </Select>
                <Button 
                  :type="sortOrder === 'asc' ? 'primary' : 'default'"
                  size="small"
                  @click="toggleSortOrder"
                >
                  {{ sortOrder === 'asc' ? '升序' : '降序' }}
                </Button>
              </div>
              <div class="export-options">
                <Button type="success" size="small" @click="exportComparison">
                  <Icon type="md-download" />
                  导出对比
                </Button>
              </div>
            </div>
            <Table :columns="comparisonColumns" :data="sortedComparisonData" border stripe />
          </div>
        </div>
      </div>
      
      <!-- 模型排名面板 -->
      <div class="model-ranking" v-if="hasData && evaluationMode === 'all'">
        <div class="section-header">
          <h4>
            <Icon type="md-trophy" size="18" />
            模型综合排名
          </h4>
          <div class="ranking-controls">
            <span>权重配置:</span>
            <div class="weight-slider">
              <span>精度权重:</span>
              <Slider v-model="rankingWeights.accuracy" :min="0" :max="1" :step="0.1" style="width: 100px;" />
              <span>{{ rankingWeights.accuracy }}</span>
            </div>
            <div class="weight-slider">
              <span>效率权重:</span>
              <Slider v-model="rankingWeights.efficiency" :min="0" :max="1" :step="0.1" style="width: 100px;" />
              <span>{{ rankingWeights.efficiency }}</span>
            </div>
            <Button size="small" @click="updateRanking">更新排名</Button>
          </div>
        </div>
        
        <div class="ranking-content">
          <div class="ranking-podium">
            <div 
              v-for="(model, index) in rankedModels.slice(0, 3)" 
              :key="model.name"
              class="podium-item"
              :class="['rank-' + (index + 1)]"
            >
              <div class="podium-rank">{{ index + 1 }}</div>
              <div class="podium-model">{{ model.displayName }}</div>
              <div class="podium-score">{{ model.score.toFixed(3) }}</div>
              <div class="podium-badge">
                <Icon 
                  :type="index === 0 ? 'md-medal' : index === 1 ? 'md-ribbon' : 'md-star'" 
                  size="20"
                />
              </div>
            </div>
          </div>
          
          <div class="ranking-list">
            <div 
              v-for="(model, index) in rankedModels" 
              :key="model.name"
              class="ranking-item"
              :class="{ 'top-performer': index < 3 }"
            >
              <div class="rank-number">{{ index + 1 }}</div>
              <div class="model-info">
                <div class="model-name">{{ model.displayName }}</div>
                <div class="model-details">
                  <span>MAE: {{ model.metrics.mae.toFixed(4) }}</span>
                  <span>R²: {{ model.metrics.r2.toFixed(4) }}</span>
                  <span>训练时间: {{ model.metrics.training_time?.toFixed(2) || 'N/A' }}s</span>
                </div>
              </div>
              <div class="score-bar">
                <div class="score-fill" :style="{ width: (model.score * 100) + '%' }"></div>
                <span class="score-text">{{ model.score.toFixed(3) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 增强的误差指标卡片 -->
      <div class="error-metrics" v-if="hasData">
        <div class="metric-card mae">
          <div class="metric-icon">
            <Icon type="md-speedometer" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.mae) }}</div>
            <div class="metric-label">MAE</div>
            <div class="metric-desc">平均绝对误差</div>
          </div>
        </div>
        
        <div class="metric-card rmse">
          <div class="metric-icon">
            <Icon type="md-analytics" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.rmse) }}</div>
            <div class="metric-label">RMSE</div>
            <div class="metric-desc">均方根误差</div>
          </div>
        </div>
        
        <div class="metric-card mape">
          <div class="metric-icon">
            <Icon type="md-trending-up" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.mape) }}%</div>
            <div class="metric-label">MAPE</div>
            <div class="metric-desc">平均绝对百分比误差</div>
          </div>
        </div>
        
        <div class="metric-card smape">
          <div class="metric-icon">
            <Icon type="md-trending-down" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.smape) }}%</div>
            <div class="metric-label">SMAPE</div>
            <div class="metric-desc">对称平均绝对百分比误差</div>
          </div>
        </div>
        
        <div class="metric-card bias">
          <div class="metric-icon">
            <Icon type="md-swap" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.bias) }}</div>
            <div class="metric-label">Bias</div>
            <div class="metric-desc">系统性偏差</div>
          </div>
        </div>
        
        <div class="metric-card r2">
          <div class="metric-icon">
            <Icon type="md-stats" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.r2) }}</div>
            <div class="metric-label">R²</div>
            <div class="metric-desc">决定系数</div>
          </div>
        </div>
        
        <div class="metric-card max_error">
          <div class="metric-icon">
            <Icon type="md-warning" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.max_error) }}</div>
            <div class="metric-label">最大误差</div>
            <div class="metric-desc">单点最大绝对误差</div>
          </div>
        </div>
        
        <div class="metric-card p90_error">
          <div class="metric-icon">
            <Icon type="md-pulse" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.p90_error) }}</div>
            <div class="metric-label">P90误差</div>
            <div class="metric-desc">90分位误差</div>
          </div>
        </div>
        
        <div class="metric-card p95_error">
          <div class="metric-icon">
            <Icon type="md-notifications" size="24" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(currentMetrics.p95_error) }}</div>
            <div class="metric-label">P95误差</div>
            <div class="metric-desc">95分位误差</div>
          </div>
        </div>
      </div>
      
      <!-- 运行效率和模型空间对比 -->
      <div class="performance-comparison" v-if="hasData && evaluationMode === 'all'">
        <div class="section-header">
          <h4>
            <Icon type="md-time" size="18" />
            性能效率对比
          </h4>
        </div>
        
        <div class="performance-grid">
          <div class="performance-section">
            <h5>训练时间对比</h5>
            <div class="performance-chart" id="trainingTimeChart" style="height: 200px;"></div>
            <div class="performance-ranking">
              <div v-for="(item, index) in trainingTimeRanking" :key="index" class="ranking-item">
                <span class="rank">{{ index + 1 }}</span>
                <span class="model-name">{{ item.model }}</span>
                <span class="value">{{ item.time }}秒</span>
              </div>
            </div>
          </div>
          
          <div class="performance-section">
            <h5>推理时间对比</h5>
            <div class="performance-chart" id="inferenceTimeChart" style="height: 200px;"></div>
            <div class="performance-ranking">
              <div v-for="(item, index) in inferenceTimeRanking" :key="index" class="ranking-item">
                <span class="rank">{{ index + 1 }}</span>
                <span class="model-name">{{ item.model }}</span>
                <span class="value">{{ item.time }}ms/点</span>
              </div>
            </div>
          </div>
          
          <div class="performance-section">
            <h5>模型空间对比</h5>
            <div class="performance-chart" id="modelSizeChart" style="height: 200px;"></div>
            <div class="performance-ranking">
              <div v-for="(item, index) in modelSizeRanking" :key="index" class="ranking-item">
                <span class="rank">{{ index + 1 }}</span>
                <span class="model-name">{{ item.model }}</span>
                <span class="value">{{ item.size }}MB</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 简化的样本快速分析 -->
      <div class="quick-analysis" v-if="hasData">
        <div class="section-header">
          <h4>快速样本分析</h4>
          <div class="quick-controls">
            <Button 
              type="primary" 
              size="small"
              @click="selectBestSample"
              icon="md-checkmark"
            >
              查看最佳样本
            </Button>
            <Button 
              type="warning" 
              size="small"
              @click="selectWorstSample"
              style="margin-left: 10px;"
              icon="md-warning"
            >
              查看最差样本
            </Button>
          </div>
        </div>
        
        <!-- 简化的样本对比图 -->
        <div class="chart-section" v-if="sampleDetails">
          <div class="chart-header">
            <h4>样本 {{ selectedSampleIndex }} 预测对比</h4>
            <div class="sample-metrics">
              <span>MSE: {{ formatNumber(sampleDetails.metrics.mse) }}</span>
              <span>MAE: {{ formatNumber(sampleDetails.metrics.mae) }}</span>
              <span>MAPE: {{ formatNumber(sampleDetails.metrics.mape) }}%</span>
              <span>精度: {{ formatNumber(sampleDetails.metrics.accuracy) }}%</span>
            </div>
          </div>
          <div id="sampleChart" style="width: 100%; height: 350px;"></div>
        </div>
      </div>
      
      <!-- 异常样本分析 -->
      <div class="anomaly-analysis" v-if="hasData && anomalies.length > 0">
        <div class="section-header">
          <h4>
            <Icon type="md-warning" size="18" />
            异常样本分析 ({{ anomalies.length }} 个)
          </h4>
          <div class="section-actions">
            <Button 
              type="success" 
              size="small"
              @click="exportAnomalyData"
              icon="md-download"
            >
              导出异常数据
            </Button>
          </div>
        </div>
        
        <div class="anomaly-table">
          <Table 
            :columns="anomalyColumns" 
            :data="anomalyTableData"
            size="small"
            border
            stripe
            :height="300"
          />
        </div>
      </div>
      
      <!-- 简化的分析总结 -->
      <div class="analysis-summary" v-if="hasData">
        <div class="section-header">
          <h4>
            <Icon type="md-document" size="18" />
            分析总结
          </h4>
        </div>
        
        <div class="summary-content">
          <div class="summary-item">
            <Icon type="md-checkmark-circle" />
            <span>
              模型整体预测精度: <strong>{{ formatNumber(errorMetrics.accuracy) }}%</strong>
              ({{ getPerformanceAssessment() }})
            </span>
          </div>
          
          <div class="summary-item">
            <Icon type="md-warning" />
            <span>
              异常样本: <strong>{{ anomalies.length }}</strong> 个 
              (占 {{ formatNumber(errorMetrics.anomaly_rate) }}%)
              - {{ getAnomalyAssessment() }}
            </span>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="!hasData && !loading" class="empty-state">
        <Icon type="md-analytics" size="64" />
        <p>点击"重新分析"开始误差分析</p>
        <p class="hint">系统将基于历史测试集数据进行模型性能评估</p>
      </div>
    </div>
  </div>
</template>

<script>
import { predictionAPI } from '@/utils/api'

export default {
  name: 'ErrorAnalysis',
  data() {
    return {
      loading: false,
      reportLoading: false,
      hasData: false,
      anomalyThreshold: 0.95,
      selectedSampleIndex: 0,
      evaluationMode: 'all', // 'current', 'all', 'compare'
      chartType: 'radar', // 'radar', 'bar', 'table', 'heatmap'
      sortBy: 'r2',
      sortOrder: 'desc', // 'asc', 'desc'
      
      // 排名权重配置
      rankingWeights: {
        accuracy: 0.7,
        efficiency: 0.3
      },
      
      // 当前选择模型的指标
      currentMetrics: {
        mae: 0,
        rmse: 0,
        mape: 0,
        smape: 0,
        bias: 0,
        r2: 0,
        max_error: 0,
        p90_error: 0,
        p95_error: 0,
        accuracy: 0,
        sample_count: 0
      },
      
      // 多模型对比数据
      allModelMetrics: {
        lightgbm: { mae: 0.0466, rmse: 0.0637, r2: 0.5356, mape: 5.66, smape: 5.20, bias: 0.002, max_error: 0.15, p90_error: 0.08, p95_error: 0.11, training_time: 2.99, inference_time: 0.5, model_size: 1.2 },
        xgboost: { mae: 0.0482, rmse: 0.0673, r2: 0.4820, mape: 5.74, smape: 5.35, bias: -0.001, max_error: 0.18, p90_error: 0.09, p95_error: 0.12, training_time: 10.37, inference_time: 0.8, model_size: 2.5 },
        mlp: { mae: 0.0411, rmse: 0.0574, r2: 0.6226, mape: 5.45, smape: 5.02, bias: 0.001, max_error: 0.13, p90_error: 0.07, p95_error: 0.10, training_time: 1.49, inference_time: 1.2, model_size: 4.8 },
        ensemble: { mae: 0.0439, rmse: 0.0570, r2: 0.6050, mape: 5.66, smape: 5.18, bias: 0.000, max_error: 0.12, p90_error: 0.075, p95_error: 0.095, training_time: 0.66, inference_time: 2.5, model_size: 8.5 }
      },
      
      // 异常样本数据
      anomalies: [],
      
      // 选中样本的详细数据
      sampleDetails: null,
      
      // 图表实例
      sampleChart: null,
      comparisonChart: null,
      trainingTimeChart: null,
      inferenceTimeChart: null,
      modelSizeChart: null,
      
      // 多模型对比表格列
      comparisonColumns: [
        { title: '模型', key: 'model', width: 100, fixed: 'left' },
        { title: 'MAE', key: 'mae', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.mae)) },
        { title: 'RMSE', key: 'rmse', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.rmse)) },
        { title: 'MAPE(%)', key: 'mape', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.mape)) },
        { title: 'SMAPE(%)', key: 'smape', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.smape)) },
        { title: 'Bias', key: 'bias', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.bias)) },
        { title: 'R²', key: 'r2', width: 80, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.r2)) },
        { title: '最大误差', key: 'max_error', width: 90, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.max_error)) },
        { title: 'P90误差', key: 'p90_error', width: 90, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.p90_error)) },
        { title: 'P95误差', key: 'p95_error', width: 90, sortable: true, render: (h, p) => h('span', this.formatNumber(p.row.p95_error)) },
        { title: '训练时间(s)', key: 'training_time', width: 100, sortable: true, render: (h, p) => h('span', p.row.training_time) },
        { title: '推理时间(ms)', key: 'inference_time', width: 100, sortable: true, render: (h, p) => h('span', p.row.inference_time) },
        { title: '模型大小(MB)', key: 'model_size', width: 100, sortable: true, render: (h, p) => h('span', p.row.model_size) }
      ],
      
      // 异常点表格列定义 (保持原有)
      anomalyColumns: [
        { title: '样本索引', key: 'index', width: 100, align: 'center' },
        { title: '预测精度', key: 'accuracy', width: 120, align: 'center', render: (h, params) => {
          const accuracy = parseFloat(params.row.accuracy)
          const color = accuracy < 0.9 ? '#ff6b6b' : accuracy < 0.95 ? '#feca57' : '#00d4aa'
          return h('span', { style: { color, fontWeight: '500' } }, accuracy.toFixed(3))
        }},
        { title: 'MSE', key: 'mse', width: 120, align: 'center', render: (h, params) => h('span', this.formatNumber(params.row.mse)) },
        { title: 'MAE', key: 'mae', width: 120, align: 'center', render: (h, params) => h('span', this.formatNumber(params.row.mae)) },
        { title: 'MAPE (%)', key: 'mape', width: 120, align: 'center', render: (h, params) => h('span', this.formatNumber(params.row.mape) + '%') },
        { title: 'R²', key: 'r2', width: 120, align: 'center', render: (h, params) => h('span', this.formatNumber(params.row.r2)) },
        { title: '操作', key: 'action', width: 100, align: 'center', render: (h, params) => {
          return h('Button', {
            props: { type: 'primary', size: 'small' },
            on: { click: () => { this.selectedSampleIndex = params.row.index; this.loadSampleDetails() } }
          }, '查看详情')
        }}
      ]
    }
  },
  
  computed: {
    anomalyTableData() {
      return this.anomalies.map(anomaly => ({
        index: anomaly.index,
        accuracy: anomaly.accuracy,
        mse: anomaly.mse,
        mae: anomaly.mae,
        mape: anomaly.mape,
        r2: anomaly.r2
      }))
    },
    
    comparisonData() {
      return Object.entries(this.allModelMetrics).map(([model, metrics]) => ({
        model: model.toUpperCase(),
        ...metrics
      }))
    },
    
    trainingTimeRanking() {
      return this.comparisonData
        .sort((a, b) => a.training_time - b.training_time)
        .map(item => ({
          model: item.model,
          time: item.training_time.toFixed(2)
        }))
    },
    
    inferenceTimeRanking() {
      return this.comparisonData
        .sort((a, b) => a.inference_time - b.inference_time)
        .map(item => ({
          model: item.model,
          time: item.inference_time.toFixed(1)
        }))
    },
    
    modelSizeRanking() {
      return this.comparisonData
        .sort((a, b) => a.model_size - b.model_size)
        .map(item => ({
          model: item.model,
          size: item.model_size.toFixed(1)
        }))
    },
    
    optimizationSuggestions() {
      const suggestions = []
      
      if (this.currentMetrics.r2 < 0.6) {
        suggestions.push('模型R²较低，建议优化特征工程或模型架构')
      }
      
      if (this.currentMetrics.mape > 10) {
        suggestions.push('MAPE较高，建议检查数据预处理和异常值处理')
      }
      
      if (this.currentMetrics.bias > 0.01) {
        suggestions.push('存在系统性偏差，建议校正模型偏置')
      }
      
      if (this.currentMetrics.max_error > 0.2) {
        suggestions.push('最大误差过大，建议增强异常值检测')
      }
      
      if (suggestions.length === 0) {
        suggestions.push('模型性能良好，可考虑在更多数据上验证稳定性')
      }
      
      return suggestions
    },
    
    // 排序后的对比数据
    sortedComparisonData() {
      const data = [...this.comparisonData]
      return data.sort((a, b) => {
        const aVal = a[this.sortBy]
        const bVal = b[this.sortBy]
        
        if (this.sortOrder === 'asc') {
          return aVal - bVal
        } else {
          return bVal - aVal
        }
      })
    },
    
    // 模型排名
    rankedModels() {
      const models = Object.entries(this.allModelMetrics).map(([name, metrics]) => {
        // 计算精度得分 (R²为主要指标)
        const accuracyScore = Math.max(0, metrics.r2 || 0)
        
        // 计算效率得分 (训练时间越短越好)
        const maxTrainingTime = Math.max(...Object.values(this.allModelMetrics).map(m => m.training_time || 1))
        const efficiencyScore = 1 - (metrics.training_time || 1) / maxTrainingTime
        
        // 综合得分
        const score = this.rankingWeights.accuracy * accuracyScore + 
                     this.rankingWeights.efficiency * efficiencyScore
        
        return {
          name,
          displayName: name.toUpperCase(),
          metrics,
          score,
          accuracyScore,
          efficiencyScore
        }
      })
      
      return models.sort((a, b) => b.score - a.score)
    }
  },
  
  mounted() {
    this.initCharts()
    this.loadErrorAnalysis()
    // 初始化当前模型为最优模型MLP
    this.currentMetrics = { ...this.allModelMetrics.mlp }
  },
  
  beforeDestroy() {
    this.disposeCharts()
  },
  
  methods: {
    async loadErrorAnalysis() {
      this.loading = true
      
      try {
        // 模拟加载多模型数据
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 设置当前模型为最优模型
        this.currentMetrics = { ...this.allModelMetrics.mlp }
        this.hasData = true
        
        // 更新图表
        this.updateAllCharts()
        
        this.$Message.success('误差分析数据加载完成')
        
      } catch (error) {
        console.error('加载误差分析数据失败:', error)
        this.hasData = false
        this.$Message.error(`加载失败: ${error.message}`)
      } finally {
        this.loading = false
      }
    },
    
    initCharts() {
      this.$nextTick(() => {
        const elements = [
          { id: 'sampleChart', chart: 'sampleChart' },
          { id: 'comparisonChart', chart: 'comparisonChart' },
          { id: 'trainingTimeChart', chart: 'trainingTimeChart' },
          { id: 'inferenceTimeChart', chart: 'inferenceTimeChart' },
          { id: 'modelSizeChart', chart: 'modelSizeChart' }
        ]
        
        elements.forEach(({ id, chart }) => {
          const el = document.getElementById(id)
          if (el && window.echarts) {
            this[chart] = window.echarts.init(el)
          }
        })
      })
    },
    
    disposeCharts() {
      const charts = ['sampleChart', 'comparisonChart', 'trainingTimeChart', 'inferenceTimeChart', 'modelSizeChart']
      charts.forEach(chart => {
        if (this[chart]) {
          this[chart].dispose()
          this[chart] = null
        }
      })
    },
    
    updateAllCharts() {
      this.$nextTick(() => {
        this.updateComparisonChart()
        this.updatePerformanceCharts()
        this.updateSampleChart()
      })
    },
    
    updateComparisonChart() {
      if (!this.comparisonChart) return
      
      const models = ['LightGBM', 'XGBoost', 'MLP', 'Ensemble']
      const metrics = ['mae', 'rmse', 'mape', 'r2']
      
      if (this.chartType === 'radar') {
        // 雷达图配置
        const radarData = models.map(model => {
          const modelData = this.allModelMetrics[model.toLowerCase()]
          return {
            name: model,
            value: [
              (1 - modelData.mae) * 100,  // MAE越小越好，转换为分数
              (1 - modelData.rmse) * 100, // RMSE越小越好
              (1 - modelData.mape/100) * 100, // MAPE越小越好
              modelData.r2 * 100  // R²越大越好
            ]
          }
        })
        
        const option = {
          title: { text: '模型性能雷达图', left: 'center', textStyle: { color: '#f7dc6f' } },
          tooltip: { trigger: 'item' },
          legend: { data: models, bottom: 10, textStyle: { color: '#f7dc6f' } },
          radar: {
            indicator: [
              { name: 'MAE', max: 100 },
              { name: 'RMSE', max: 100 },
              { name: 'MAPE', max: 100 },
              { name: 'R²', max: 100 }
            ],
            axisLabel: { color: '#999' },
            splitLine: { lineStyle: { color: '#333' } }
          },
          series: [{
            type: 'radar',
            data: radarData
          }]
        }
        
        this.comparisonChart.setOption(option)
        
      } else if (this.chartType === 'bar') {
        // 柱状图配置
        const option = {
          title: { text: '模型性能柱状图', left: 'center', textStyle: { color: '#f7dc6f' } },
          tooltip: { trigger: 'axis' },
          legend: { data: ['MAE', 'RMSE', 'MAPE', 'R²'], bottom: 10, textStyle: { color: '#f7dc6f' } },
          xAxis: { type: 'category', data: models, axisLabel: { color: '#999' } },
          yAxis: { type: 'value', axisLabel: { color: '#999' } },
          series: metrics.map(metric => ({
            name: metric.toUpperCase(),
            type: 'bar',
            data: models.map(model => this.allModelMetrics[model.toLowerCase()][metric])
          }))
        }
        
        this.comparisonChart.setOption(option)
        
      } else if (this.chartType === 'heatmap') {
        // 热力图配置
        const data = []
        models.forEach((model, modelIndex) => {
          metrics.forEach((metric, metricIndex) => {
            const value = this.allModelMetrics[model.toLowerCase()][metric]
            data.push([modelIndex, metricIndex, value])
          })
        })
        
        const option = {
          title: { text: '模型性能热力图', left: 'center', textStyle: { color: '#f7dc6f' } },
          tooltip: {
            position: 'top',
            formatter: function(params) {
              const modelName = models[params.data[0]]
              const metricName = metrics[params.data[1]].toUpperCase()
              const value = params.data[2]
              return `${modelName}<br/>${metricName}: ${value.toFixed(4)}`
            }
          },
          grid: { height: '60%', y: '10%' },
          xAxis: {
            type: 'category',
            data: models,
            splitArea: { show: true },
            axisLabel: { color: '#999' }
          },
          yAxis: {
            type: 'category',
            data: metrics.map(m => m.toUpperCase()),
            splitArea: { show: true },
            axisLabel: { color: '#999' }
          },
          visualMap: {
            min: 0,
            max: 1,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            textStyle: { color: '#f7dc6f' }
          },
          series: [{
            type: 'heatmap',
            data: data,
            label: {
              show: true,
              formatter: function(params) {
                return params.data[2].toFixed(3)
              }
            }
          }]
        }
        
        this.comparisonChart.setOption(option)
      }
    },
    
    // 表格排序相关方法
    updateTableSort() {
      // 排序逻辑在计算属性中处理
      this.$forceUpdate()
    },
    
    toggleSortOrder() {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
    },
    
    // 导出对比数据
    exportComparison() {
      try {
        const headers = ['模型', 'MAE', 'RMSE', 'MAPE(%)', 'SMAPE(%)', 'Bias', 'R²', '最大误差', 'P90误差', 'P95误差', '训练时间(s)', '推理时间(ms)', '模型大小(MB)']
        const csvContent = [
          headers.join(','),
          ...this.sortedComparisonData.map(row => [
            row.model,
            row.mae.toFixed(4),
            row.rmse.toFixed(4),
            row.mape.toFixed(2),
            row.smape.toFixed(2),
            row.bias.toFixed(6),
            row.r2.toFixed(4),
            row.max_error.toFixed(4),
            row.p90_error.toFixed(4),
            row.p95_error.toFixed(4),
            row.training_time.toFixed(2),
            row.inference_time.toFixed(1),
            row.model_size.toFixed(1)
          ].join(','))
        ].join('\n')
        
        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = `模型性能对比_${new Date().toISOString().split('T')[0]}.csv`
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.$Message.success('模型对比数据导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$Message.error('导出失败')
      }
    },
    
    // 更新排名
    updateRanking() {
      // 确保权重和为1
      const totalWeight = this.rankingWeights.accuracy + this.rankingWeights.efficiency
      if (totalWeight !== 1) {
        this.rankingWeights.accuracy = this.rankingWeights.accuracy / totalWeight
        this.rankingWeights.efficiency = this.rankingWeights.efficiency / totalWeight
      }
      
      this.$forceUpdate()
      this.$Message.success('排名已更新')
    },
    
    updatePerformanceCharts() {
      // 训练时间图表
      if (this.trainingTimeChart) {
        const option = {
          title: { textStyle: { color: '#f7dc6f', fontSize: 14 } },
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: this.trainingTimeRanking.map(item => item.model), axisLabel: { color: '#999' } },
          yAxis: { type: 'value', axisLabel: { color: '#999' } },
          series: [{
            type: 'bar',
            data: this.trainingTimeRanking.map(item => parseFloat(item.time)),
            itemStyle: { color: '#75deef' }
          }]
        }
        this.trainingTimeChart.setOption(option)
      }
      
      // 推理时间图表
      if (this.inferenceTimeChart) {
        const option = {
          title: { textStyle: { color: '#f7dc6f', fontSize: 14 } },
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: this.inferenceTimeRanking.map(item => item.model), axisLabel: { color: '#999' } },
          yAxis: { type: 'value', axisLabel: { color: '#999' } },
          series: [{
            type: 'bar',
            data: this.inferenceTimeRanking.map(item => parseFloat(item.time)),
            itemStyle: { color: '#4ecdc4' }
          }]
        }
        this.inferenceTimeChart.setOption(option)
      }
      
      // 模型大小图表
      if (this.modelSizeChart) {
        const option = {
          title: { textStyle: { color: '#f7dc6f', fontSize: 14 } },
          tooltip: { trigger: 'axis' },
          xAxis: { type: 'category', data: this.modelSizeRanking.map(item => item.model), axisLabel: { color: '#999' } },
          yAxis: { type: 'value', axisLabel: { color: '#999' } },
          series: [{
            type: 'bar',
            data: this.modelSizeRanking.map(item => parseFloat(item.size)),
            itemStyle: { color: '#ff6b6b' }
          }]
        }
        this.modelSizeChart.setOption(option)
      }
    },
    
    async loadSampleDetails() {
      try {
        const response = await predictionAPI.getSampleDetails(this.selectedSampleIndex)
        
        if (response.success) {
          this.sampleDetails = response.data
          this.updateSampleChart()
        }
      } catch (error) {
        console.error('加载样本详情失败:', error)
        this.$Message.error(`加载样本详情失败: ${error.message}`)
      }
    },
    
    async generateReport() {
      this.reportLoading = true
      
      try {
        const response = await predictionAPI.generateErrorReport()
        
        if (response.success) {
          this.$Message.success('误差分析报告生成完成')
          // 可以在这里添加下载报告的逻辑
        }
      } catch (error) {
        console.error('生成报告失败:', error)
        this.$Message.error(`生成报告失败: ${error.message}`)
      } finally {
        this.reportLoading = false
      }
    },
    
    async updateAnomalyThreshold() {
      if (this.hasData) {
        try {
          const response = await predictionAPI.getAnomalies(this.anomalyThreshold)
          if (response.success) {
            this.anomalies = response.data.anomalies
            this.errorMetrics.anomaly_count = response.data.total_count
            this.errorMetrics.anomaly_rate = response.data.anomaly_rate
          }
        } catch (error) {
          console.error('更新异常检测失败:', error)
        }
      }
    },
    
    selectBestSample() {
      // 选择精度最高的样本（假设第一个异常样本之前的都是好样本）
      this.selectedSampleIndex = 0
      this.loadSampleDetails()
    },
    
    selectWorstSample() {
      // 选择精度最低的样本
      if (this.anomalies.length > 0) {
        // 找到精度最低的异常样本
        const worstAnomaly = this.anomalies.reduce((worst, current) => 
          current.accuracy < worst.accuracy ? current : worst
        )
        this.selectedSampleIndex = worstAnomaly.index
        this.loadSampleDetails()
      }
    },
    
    exportAnomalyData() {
      try {
        // 创建CSV内容
        const headers = ['样本索引', '预测精度', 'MSE', 'MAE', 'MAPE(%)', 'R²']
        const csvContent = [
          headers.join(','),
          ...this.anomalies.map(anomaly => [
            anomaly.index,
            anomaly.accuracy.toFixed(3),
            anomaly.mse.toFixed(6),
            anomaly.mae.toFixed(6),
            anomaly.mape.toFixed(2),
            anomaly.r2.toFixed(3)
          ].join(','))
        ].join('\n')
        
        // 添加UTF-8 BOM解决乱码问题
        const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = `异常样本分析_${new Date().toISOString().split('T')[0]}.csv`
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.$Message.success('异常样本数据导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$Message.error('导出失败')
      }
    },
    
    formatNumber(value) {
      if (typeof value !== 'number') return value
      if (value === 0) return '0'
      if (Math.abs(value) >= 1) return value.toFixed(3)
      return value.toFixed(6)
    },
    
    getPerformanceAssessment() {
      const accuracy = this.errorMetrics.accuracy
      if (accuracy >= 95) return '模型表现优秀。'
      if (accuracy >= 90) return '模型表现良好。'
      if (accuracy >= 85) return '模型表现一般，有改进空间。'
      return '模型表现较差，需要重点优化。'
    },
    
    getAnomalyAssessment() {
      const rate = this.errorMetrics.anomaly_rate
      if (rate < 5) return '异常样本比例较低，模型稳定性良好。'
      if (rate < 10) return '异常样本比例适中，需要关注异常模式。'
      return '异常样本比例较高，建议深入分析异常原因。'
    },
    
    initCharts() {
      this.$nextTick(() => {
        // 确保DOM元素存在再初始化
        const sampleEl = document.getElementById('sampleChart')
        
        if (sampleEl) {
          this.sampleChart = this.$echarts(sampleEl)
        }
      })
    },
    
    disposeCharts() {
      if (this.sampleChart) this.sampleChart.dispose()
    },
    
    updateAllCharts() {
      this.$nextTick(() => {
        this.updateSampleChart()
      })
    },
    
    updateSampleChart() {
      if (!this.sampleChart || !this.sampleDetails) return
      
      const timeLabels = Array.from({length: 96}, (_, i) => {
        const hour = Math.floor(i / 4)
        const minute = (i % 4) * 15
        return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
      })
      
      const option = {
        title: {
          text: `样本 ${this.selectedSampleIndex} 预测对比`,
          textStyle: { color: '#f7dc6f', fontSize: 16 }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          backgroundColor: 'rgba(7, 19, 50, 0.9)',
          borderColor: '#f7dc6f',
          textStyle: { color: '#f7dc6f' }
        },
        legend: {
          data: ['真实值', '预测值', '误差'],
          textStyle: { color: '#f7dc6f' },
          top: '10%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: timeLabels,
          axisLabel: { 
            color: '#f7dc6f',
            interval: 11 // 每12个点显示一个标签
          },
          axisLine: { lineStyle: { color: '#f7dc6f' } }
        },
        yAxis: [
          {
            type: 'value',
            name: '负荷值',
            axisLabel: { color: '#f7dc6f' },
            axisLine: { lineStyle: { color: '#f7dc6f' } },
            splitLine: { lineStyle: { color: '#334155', type: 'dashed' } }
          },
          {
            type: 'value',
            name: '误差',
            position: 'right',
            axisLabel: { color: '#f7dc6f' },
            axisLine: { lineStyle: { color: '#f7dc6f' } }
          }
        ],
        series: [
          {
            name: '真实值',
            type: 'line',
            data: this.sampleDetails.true_values,
            itemStyle: { color: '#00d4aa' },
            lineStyle: { width: 2 },
            smooth: true,
            showSymbol: false
          },
          {
            name: '预测值',
            type: 'line',
            data: this.sampleDetails.predicted_values,
            itemStyle: { color: '#f7dc6f' },
            lineStyle: { width: 2, type: 'dashed' },
            smooth: true,
            showSymbol: false
          },
          {
            name: '误差',
            type: 'line',
            yAxisIndex: 1,
            data: this.sampleDetails.errors,
            itemStyle: { color: '#ff6b6b' },
            lineStyle: { width: 1 },
            smooth: true,
            showSymbol: false
          }
        ]
      }
      
      this.sampleChart.setOption(option)
    },
    

  }
}
</script>

<style lang="less" scoped>
.error-analysis {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #0f1b2a 100%);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  
  .analysis-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    
    // 分析说明面板
    .info-panel {
      background: rgba(7, 19, 50, 0.9);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 20px;
      backdrop-filter: blur(10px);
      
      .panel-title {
        color: #f7dc6f;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #1a3c58;
        display: flex;
        align-items: center;
        gap: 8px;
        
        :deep(.ivu-icon) {
          color: #f7dc6f;
        }
      }
      
      .info-content {
        .description {
          color: #ddd;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 20px;
        }
        
        .control-row {
          display: flex;
          align-items: flex-end;
          gap: 20px;
          flex-wrap: wrap;
          
          .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            
            label {
              color: #f7dc6f;
              font-size: 12px;
              font-weight: 500;
            }
            
            .unit-label {
              color: #999;
              font-size: 11px;
              margin-left: 8px;
            }
            
            :deep(.ivu-input-number) {
              .ivu-input-number-input {
                background: rgba(26, 60, 88, 0.6);
                border: 1px solid #1a3c58;
                color: #f7dc6f;
                
                &:hover, &:focus {
                  border-color: #f7dc6f;
                }
              }
              
              .ivu-input-number-handler {
                background: rgba(26, 60, 88, 0.8);
                border-color: #1a3c58;
                color: #f7dc6f;
                
                &:hover {
                  background: rgba(247, 220, 111, 0.1);
                  border-color: #f7dc6f;
                }
              }
            }
            
            :deep(.ivu-btn) {
              &.ivu-btn-primary {
                background: linear-gradient(135deg, #f7dc6f, #f39c12);
                border-color: #f7dc6f;
                color: white;
                box-shadow: 0 4px 15px rgba(247, 220, 111, 0.4);
                
                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 6px 20px rgba(247, 220, 111, 0.6);
                }
              }
              &.ivu-btn-success {
                background: linear-gradient(135deg, #26de81, #20bf68);
                border-color: #26de81;
                color: white;
                
                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 4px 15px rgba(38, 222, 129, 0.4);
                }
              }
              &.ivu-btn-error {
                background: linear-gradient(135deg, #ff6b6b, #ff5252);
                border-color: #ff6b6b;
                color: white;
                
                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
                }
              }
            }
          }
        }
      }
    }
    
    // 整体误差指标卡片
    .error-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      
      .metric-card {
        background: rgba(7, 19, 50, 0.8);
        border: 1px solid #1a3c58;
        border-radius: 12px;
        padding: 20px;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          border-radius: 12px 12px 0 0;
        }
        
        &.mse::before {
          background: linear-gradient(90deg, #ff6b6b, #ff5252);
        }
        
        &.mae::before {
          background: linear-gradient(90deg, #feca57, #ff9500);
        }
        
        &.mape::before {
          background: linear-gradient(90deg, #48dbfb, #0abde3);
        }
        
        &.r2::before {
          background: linear-gradient(90deg, #1dd1a1, #10ac84);
        }
        
        &.anomaly::before {
          background: linear-gradient(90deg, #ff9ff3, #f368e0);
        }
        
        &.accuracy::before {
          background: linear-gradient(90deg, #26de81, #20bf68);
        }
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          border-color: #f7dc6f;
        }
        
        display: flex;
        align-items: center;
        gap: 15px;
        
        .metric-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: rgba(247, 220, 111, 0.1);
          
          :deep(.ivu-icon) {
            color: #f7dc6f;
            font-size: 24px;
          }
        }
        
        .metric-content {
          flex: 1;
          
          .metric-value {
            font-size: 28px;
            font-weight: bold;
            color: #f7dc6f;
            margin-bottom: 5px;
            font-family: 'Monaco', 'Consolas', monospace;
          }
          
          .metric-label {
            font-size: 14px;
            color: #00d4aa;
            font-weight: 500;
            margin-bottom: 3px;
          }
          
          .metric-desc {
            font-size: 11px;
            color: #999;
            line-height: 1.3;
          }
        }
      }
    }
    
    // 快速分析
    .quick-analysis {
      height: 200px;
      background: rgba(7, 19, 50, 0.8);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 10px;
      backdrop-filter: blur(10px);
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #1a3c58;
        
        h4 {
          color: #f7dc6f;
          font-size: 16px;
          font-weight: bold;
          margin: 0;
        }
        
        .sample-controls {
          display: flex;
          align-items: center;
          gap: 10px;
          
          span {
            color: #f7dc6f;
            font-size: 14px;
            font-weight: 500;
          }
          
          :deep(.ivu-input-number) {
            .ivu-input-number-input {
              background: rgba(26, 60, 88, 0.6);
              border: 1px solid #1a3c58;
              color: #f7dc6f;
              
              &:hover, &:focus {
                border-color: #f7dc6f;
              }
            }
            
            .ivu-input-number-handler {
              background: rgba(26, 60, 88, 0.8);
              border-color: #1a3c58;
              color: #f7dc6f;
              
              &:hover {
                background: rgba(247, 220, 111, 0.1);
                border-color: #f7dc6f;
              }
            }
          }
        }
      }
    }
    
    // 图表容器
    .charts-container {
      display: flex;
      flex-direction: column;
      gap: 25px;
      
      .chart-section {
        background: rgba(7, 19, 50, 0.8);
        border: 1px solid #1a3c58;
        border-radius: 12px;
        padding: 20px;
        backdrop-filter: blur(10px);
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, #f7dc6f, #f39c12);
          border-radius: 12px 12px 0 0;
        }
        
        .chart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 1px solid #1a3c58;
          
          h4 {
            color: #f7dc6f;
            font-size: 16px;
            font-weight: bold;
            margin: 0;
          }
          
          .sample-metrics {
            display: flex;
            gap: 15px;
            align-items: center;
            color: #999;
            font-size: 13px;
          }
          
          .chart-desc {
            color: #999;
            font-size: 12px;
            margin: 5px 0 0 0;
          }
        }
      }
    }
    
    // 异常样本分析
    .anomaly-analysis {
      background: rgba(7, 19, 50, 0.8);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 20px;
      backdrop-filter: blur(10px);
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #1a3c58;
        
        h4 {
          color: #f7dc6f;
          font-size: 16px;
          font-weight: bold;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 8px;
          
          :deep(.ivu-icon) {
            color: #ff6b6b;
          }
        }
        
        .section-actions {
          :deep(.ivu-btn) {
            &.ivu-btn-success {
              background: linear-gradient(135deg, #26de81, #20bf68);
              border-color: #26de81;
              color: white;
              
              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 15px rgba(38, 222, 129, 0.4);
              }
            }
          }
        }
      }
      
      .anomaly-table {
        :deep(.ivu-table) {
          background: rgba(7, 19, 50, 0.5);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          
          .ivu-table-header th {
            background: rgba(7, 19, 50, 0.8) !important;
            color: #f7dc6f !important;
            border-color: #1a3c58 !important;
          }
          
          .ivu-table-tbody {
            tr {
              background: rgba(7, 19, 50, 0.3);
              
              &:nth-child(even) {
                background: rgba(26, 60, 88, 0.3);
              }
              
              &:hover {
                background: rgba(247, 220, 111, 0.1) !important;
              }
              
              td {
                border-color: #1a3c58 !important;
                color: #ddd !important;
              }
            }
          }
        }
      }
    }
    
    // 分析总结
    .analysis-summary {
      background: rgba(7, 19, 50, 0.8);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 20px;
      backdrop-filter: blur(10px);
      
      .section-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #1a3c58;
        
        h4 {
          color: #f7dc6f;
          font-size: 16px;
          font-weight: bold;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 8px;
          
          :deep(.ivu-icon) {
            color: #f7dc6f;
          }
        }
      }
      
      .summary-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
        
        .summary-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 15px;
          background: rgba(26, 60, 88, 0.3);
          border-radius: 8px;
          
          :deep(.ivu-icon) {
            color: #f7dc6f;
            font-size: 18px;
          }
          
          span {
            color: #ddd;
            font-size: 14px;
            line-height: 1.5;
            
            strong {
              color: #f7dc6f;
            }
          }
        }
      }
      
      .old-report-content {
        .report-section {
          margin-bottom: 20px;
          
          h5 {
            color: #00d4aa;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px solid #00d4aa;
          }
          
          p {
            color: #ddd;
            line-height: 1.6;
            margin-bottom: 10px;
            
            strong {
              color: #f7dc6f;
              font-weight: bold;
            }
          }
          
          ul {
            list-style: none;
            padding-left: 0;
            
            li {
              color: #ddd;
              line-height: 1.6;
              margin-bottom: 8px;
              padding-left: 20px;
              position: relative;
              
              &::before {
                content: '•';
                color: #f7dc6f;
                position: absolute;
                left: 0;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
    
    // 空状态
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      color: #999;
      text-align: center;
      background: rgba(7, 19, 50, 0.5);
      border: 1px dashed #1a3c58;
      border-radius: 12px;
      
      :deep(.ivu-icon) {
        color: #f7dc6f;
        margin-bottom: 20px;
        opacity: 0.7;
      }
      
      p {
        font-size: 16px;
        margin-bottom: 10px;
        
        &.hint {
          font-size: 14px;
          color: #f7dc6f;
          opacity: 0.8;
        }
      }
    }
  }
}

// 多模型对比面板
.model-comparison {
  background: rgba(7, 19, 50, 0.8);
  border: 1px solid #1a3c58;
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 25px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1a3c58;
    
    h4 {
      color: #f7dc6f;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      
      :deep(.ivu-icon) {
        color: #f7dc6f;
      }
    }
    
    .view-controls {
      display: flex;
      gap: 8px;
      
      :deep(.ivu-btn) {
        border-radius: 4px;
        
        &.ivu-btn-primary {
          background: linear-gradient(135deg, #f7dc6f, #f39c12);
          border-color: #f7dc6f;
        }
      }
    }
  }
  
  .comparison-content {
    .comparison-table {
      .table-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(26, 60, 88, 0.3);
        border-radius: 8px;
        
        .sort-options {
          display: flex;
          align-items: center;
          gap: 10px;
          
          span {
            color: #f7dc6f;
            font-size: 14px;
            font-weight: 500;
          }
          
          :deep(.ivu-select) {
            .ivu-select-selection {
              background: rgba(7, 19, 50, 0.5);
              border-color: #1a3c58;
              color: #f7dc6f;
            }
          }
        }
        
        .export-options {
          :deep(.ivu-btn-success) {
            background: linear-gradient(135deg, #26de81, #20bf68);
            border-color: #26de81;
          }
        }
      }
      
      :deep(.ivu-table) {
        background: rgba(7, 19, 50, 0.5);
        border: 1px solid #1a3c58;
        border-radius: 8px;
        
        .ivu-table-header th {
          background: rgba(7, 19, 50, 0.8) !important;
          color: #f7dc6f !important;
          border-color: #1a3c58 !important;
        }
        
        .ivu-table-tbody {
          tr {
            background: rgba(7, 19, 50, 0.3);
            
            &:nth-child(even) {
              background: rgba(26, 60, 88, 0.3);
            }
            
            &:hover {
              background: rgba(247, 220, 111, 0.1) !important;
            }
            
            td {
              border-color: #1a3c58 !important;
              color: #ddd !important;
            }
          }
        }
      }
    }
  }
}

// 模型排名面板
.model-ranking {
  background: rgba(7, 19, 50, 0.8);
  border: 1px solid #1a3c58;
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 25px;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #1a3c58;
    
    h4 {
      color: #f7dc6f;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      
      :deep(.ivu-icon) {
        color: #f7dc6f;
      }
    }
    
    .ranking-controls {
      display: flex;
      align-items: center;
      gap: 15px;
      
      span {
        color: #f7dc6f;
        font-size: 14px;
        font-weight: 500;
      }
      
      .weight-slider {
        display: flex;
        align-items: center;
        gap: 8px;
        
        span {
          color: #999;
          font-size: 12px;
          min-width: 60px;
        }
        
        :deep(.ivu-slider) {
          .ivu-slider-track {
            background: linear-gradient(90deg, #f7dc6f, #f39c12);
          }
          
          .ivu-slider-button {
            border-color: #f7dc6f;
          }
        }
      }
    }
  }
  
  .ranking-content {
    .ranking-podium {
      display: flex;
      justify-content: center;
              align-items: flex-end;
      gap: 20px;
      margin-bottom: 30px;
      
      .podium-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-radius: 12px;
        position: relative;
        min-width: 120px;
        
        &.rank-1 {
          background: linear-gradient(135deg, #ffd700, #ffb300);
          color: #000;
          order: 2;
          height: 140px;
          
          .podium-badge {
            color: #ff6b6b;
          }
        }
        
        &.rank-2 {
          background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
          color: #000;
          order: 1;
          height: 120px;
          
          .podium-badge {
            color: #4ecdc4;
          }
        }
        
        &.rank-3 {
          background: linear-gradient(135deg, #cd7f32, #b8860b);
          color: #000;
          order: 3;
          height: 100px;
          
          .podium-badge {
            color: #f7dc6f;
          }
        }
        
        .podium-rank {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        
        .podium-model {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .podium-score {
          font-size: 14px;
          margin-bottom: 10px;
        }
        
        .podium-badge {
          font-size: 24px;
        }
      }
    }
    
    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 15px;
        margin-bottom: 10px;
        background: rgba(26, 60, 88, 0.3);
        border-radius: 8px;
        border: 1px solid #1a3c58;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(247, 220, 111, 0.1);
          border-color: #f7dc6f;
        }
        
        &.top-performer {
          border-color: #f7dc6f;
          background: rgba(247, 220, 111, 0.05);
        }
        
        .rank-number {
          font-size: 18px;
          font-weight: bold;
          color: #f7dc6f;
          min-width: 40px;
          text-align: center;
        }
        
        .model-info {
          flex: 1;
          margin-left: 15px;
          
          .model-name {
            font-size: 16px;
            font-weight: bold;
            color: #f7dc6f;
            margin-bottom: 5px;
          }
          
          .model-details {
            display: flex;
            gap: 15px;
            
            span {
              color: #999;
              font-size: 12px;
            }
          }
        }
        
        .score-bar {
          min-width: 150px;
          position: relative;
          height: 20px;
          background: rgba(7, 19, 50, 0.5);
          border-radius: 10px;
          overflow: hidden;
          
          .score-fill {
            height: 100%;
            background: linear-gradient(90deg, #f7dc6f, #f39c12);
            border-radius: 10px;
            transition: width 0.8s ease;
          }
          
          .score-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #000;
            font-size: 12px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .error-analysis {
    .analysis-content {
      .error-metrics {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
      }
      
      .charts-container .chart-section .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }
  }
}

@media (max-width: 768px) {
  .error-analysis {
    padding: 15px;
    
    .analysis-content {
      gap: 20px;
      
      .info-panel {
        padding: 15px;
        
        .info-content .control-row {
          flex-direction: column;
          align-items: stretch;
          gap: 15px;
        }
      }
      
      .error-metrics {
        grid-template-columns: 1fr;
        gap: 15px;
        
        .metric-card {
          padding: 15px;
          
          .metric-icon {
            width: 40px;
            height: 40px;
          }
          
          .metric-content .metric-value {
            font-size: 24px;
          }
        }
      }
      
      .sample-selector {
        padding: 15px;
        
        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
      }
      
      .charts-container .chart-section {
        padding: 15px;
        
        .chart-header {
          .sample-metrics {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
          }
        }
      }
      
      .anomaly-analysis, .analysis-report {
        padding: 15px;
        
        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
      }
    }
  }
}


</style> 